<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app {
            width: 430px;
            margin: 10px auto;
        }
        
        .nav {
            width: 430px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            position: relative;
        }
        
        .nav1 {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            box-sizing: border-box;
            background-color: pink;
            cursor: pointer;
            position: absolute;
            border-radius: 10px;
        }
        
        .nav1_2 {
            left: 110px;
        }
        
        .nav1_3 {
            left: 220px;
        }
        
        .nav1_4 {
            left: 330px;
        }
        
        .nav .active {
            background-color: deeppink;
            animation: move 2s;
            box-shadow: 0px 0px 10px #333;
            /* position: absolute; */
        }
        
        @keyframes move {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }
        
        .cont {
            width: 430px;
            height: 430px;
            line-height: 440px;
            text-align: center;
            position: relative;
            transform-style: preserve-3d;
        }
        
        @keyframes move_1 {
            0% {
                transform: translateX(0px);
            }
            25% {
                transform: translateX(-10px);
            }
            50% {
                transform: translateX(0px);
            }
            75% {
                transform: translateX(10px);
            }
            100% {
                transform: translateX(0px);
            }
        }
        
        .cont1 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            display: none;
            box-sizing: border-box;
        }
        
        .cont .change {
            display: block;
            background-color: burlywood;
            animation: move_1 2s;
            box-shadow: 0px 0px 10px #333;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="nav">
            <div class="nav1 nav1_1" @click="changestaic(0)" :class="staic==0?'active':''">安踏</div>
            <div class="nav1 nav1_2" @click="changestaic(1)" :class="staic==1?'active':''">耐克</div>
            <div class="nav1 nav1_3" @click="changestaic(2)" :class="staic==2?'active':''">李宁</div>
            <div class="nav1 nav1_4" @click="changestaic(3)" :class="staic==3?'active':''">匹克</div>
        </div>
        <div class="cont">
            <div class="cont1" :class="staic==0?'change':''">外套</div>
            <div class="cont1" :class="staic==1?'change':''">裤子</div>
            <div class="cont1" :class="staic==2?'change':''">鞋子</div>
            <div class="cont1" :class="staic==3?'change':''">拖鞋</div>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            data: {
                staic: 0
            },
            methods: {
                changestaic(index) {
                    this.staic = index
                }
            }
        }).$mount(".app")
    </script>
</body>

</html>